<!DOCTYPE HTML>
<html>
<head>
    <title>Flask-SocketIO Test</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.2/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">


        $(document).ready(function () {
            namespace = '/chat';
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);

            socket.on('connect', function () {
                console.log('链接成功');
                const urlParams = new URLSearchParams(window.location.search);
                const create_room = urlParams.get('create_room'); // "John"
                const join_room = urlParams.get('join_room'); // "John"
                if (join_room){
                    socket.emit('join_room', {room: join_room});
                }else {
                    socket.emit('create_room', {room: create_room});
                }

            });

            socket.on('my_qian', function (msg) {
                $('#log').append('<br>' + $('<div/>').text('Received #' + msg.concent).html());
                const urlParams = new URLSearchParams(window.location.search);
                const room = urlParams.get('join_room'); // "John"
                if (msg.msg_id){
                    socket.emit('reading', {chat_history_id: msg.msg_id, room_id: room});
                }

            });

            $('form#emit').submit(function (event) {
                const urlParams = new URLSearchParams(window.location.search);
                const room = urlParams.get('join_room'); // "John"
                socket.emit('my_hou', {data: $('#emit_data').val(), room: room});
                // socket.emit('my_hou', {data: $('#emit_data').val()});
                return false;
            });
        });


    </script>
</head>
<body>
<h1>Flask-SocketIO Test</h1>
<p>Async mode is: <b>{{ async_mode }}</b></p>
<h2>Send:</h2>

<form id="emit" method="POST" action='#'>
    <input type="text" name="emit_data" id="emit_data" placeholder="Message">
    <input type="submit" value="Echo">
</form>

<h2>Receive:</h2>
<div id="log"></div>
</body>
</html>
